<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <el-col :span="5">
  	      <el-input type="text" placeholder="请输入课程姓名" v-model="courseName" size="small"></el-input>
        </el-col>
        <div class="button">
  	      <el-button type="primary" size="small" @click="getTabelData">搜索</el-button>
  	      <el-button type="primary" size="small">导出</el-button>
        </div>
	    </div>
    </div>

    <div class="model">
      <img :src="IMGBASE64.PINGFENLIEBIE2X" class="pink">
      <span class="title">课程管理</span>
      <div class="kong"></div>
      <el-table :data="tableData" style="width: 100%">
      	<el-table-column prop="id" label="课程编号" align="center"></el-table-column>
      	<el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
      	<el-table-column prop="number" label="人数" align="center"></el-table-column>
      	<el-table-column prop="classTeacher" label="上课老师" align="center"></el-table-column>
      	<el-table-column prop="classAddr" label="上课地点" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column prop="rainAddr" label="雨天地点" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column prop="teachingObject" label="授课对象" align="center"></el-table-column>
      	<el-table-column prop="watchTeacher" label="巡查人" align="center"></el-table-column>
      </el-table>
      <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      courseName: null,
      tableData: [],
      total: 0,
      page: 1,
      paging: true
    }
  },
  mounted () {
    this.getTabelData()
  },
  methods: {
    getTabelData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/census', {page: (this.page), size: 20, courseName: this.courseName}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.content
          this.total = response.data.data.total
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].num = i + 1
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTabelData()
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.button{
  display: inline;
  margin-left: 2%;
}
</style>
